<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尾递归、节流、防抖</title>
</head>

<body>
    <input type="text" id="input">
    <button id="btn">投票</button>
    <script src="./index.js"></script>
    <script src="./节流防抖.js"></script>
    <!-- 
        1.尾递归：
            递归的升级版；
            函数的尾调用：一个函数的最后一步 是返回另一个函数的执行结果，就叫做函数的尾部调用...
                函数尾调用就不会去保留外部函数的调用栈 从而减少资源消耗...也不会发生调用栈溢出的情况；

                func f(x){
                    ...
                    return g(x)
                }

                func g(x){
                    ...
                }

            将递归函数和尾调用结合起来 就可以完美解决递归的资源消耗问题；
            func jc(n,total = 1){
                if(n === 1) return total

                return jc((n-1) * total, total)
            }

            内部函数的返回结果 和外部函数的返回结果是同一个东西，
            浏览器就会自动去清空外部函数的调用栈和作用域...从而减少资源消耗；

            本质上就是利用 参数 来存储计算结果...

            不光空间优化 而且时间优化

        2.节流和防抖：
            提升性能 减小浪费

            (1) 防抖：

            比如：
                在输入框输入的时候 向后台发送请求 得到数据列表并渲染在页面上 
                但是，只有最后输入的值 才是有效的请求 我们就需要把 其他无效的输入过滤掉(比如输错的)

                通过标记 用户输入停止之后才发送请求...

                目的就是 拦截用户的高频输入...

                可以使用定时器来过滤掉有效输入前的所有输入值...
            核心：
                将多次高频操作，前面都忽略，只保留最后一次结果...

                优点：减小dom操作频率 减少请求，优化性能...

            这种操作就是 防抖！ 防止高频率抖动的一个操作...

            (2) 节流：
                高频操作：
                    不管用户的操作有多频繁，都给他加一个限制时间 在限制时间内 只能执行一次；
                    比如 每隔一秒 才能操作一次...

            两者的区别：
                防抖：拦截除了最后一次的所有操作...
                节流：限制流量 不管有多少操作...都让他在限制时间内只执行一次或者几次...
    -->
</body>

</html>